<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>

<script>
	var search_type_media = "searchAll";
	var search_keyWord = "";
	var search_repository = "";
	var select_mediaId;
	var select_repositoryID;

	$(function() {
		optionAction();
		searchAction();
		mediaListInit();
		editMediaAction();
		deleteMediaAction();
	})

	// 下拉框選擇動作
	function optionAction() {
		$(".dropOption").click(function() {
			var type = $(this).text();
			$("#search_input").val("");
			if (type == "所有") {
				$("#search_input_type").attr("readOnly", "true");
				search_type_media = "searchAll";
			} else if (type == "媒资ID") {
				$("#search_input_type").removeAttr("readOnly");
				search_type_media = "searchByMediaID";
			} else if (type == "媒资名称") {
				$("#search_input_type").removeAttr("readOnly");
				search_type_media = "searchByMediaName";
			} else if(type = "媒资类型"){
				$("#search_input_type").removeAttr("readOnly");
				search_type_media = "searchByMediaType";
			}else {
				$("#search_input_type").removeAttr("readOnly");
			}

			$("#search_type").text(type);
			$("#search_input_type").attr("placeholder", type);
		})
	}

	// 搜索动作
	function searchAction() {
		$('#search_button').click(function() {
			search_keyWord = $('#search_input_type').val();
			//search_repository = $('#search_input_repository').val();
			tableRefresh();
		})
	}

	// 分页查询参数
	function queryParams(params) {
		var temp = {
			limit : params.limit,
			offset : params.offset,
			searchType : search_type_media,
			keyword : search_keyWord
		}
		return temp;
	}

	// 表格初始化
	function mediaListInit() {
		$('#mediaList')
				.bootstrapTable(
						{
							columns : [
									{
										field : 'mediaId',
										title : '媒资ID'
									//sortable: true
									},
									{
										field : 'mediaName',
										title : '媒资名称'
									},
									{
										field : 'mediaCategory',
										title : '媒资分类'
									},
									{
										field : 'mediaGrade',
										title : '媒资等级'
										
									},
									{
										field : 'createTime',
										title : '媒资创建时间'
									},
									{
										field : 'mediaUrl',
										title : '媒资存储地址'
									},
									{
										field : 'operation',
										title : '操作',
										formatter : function(value, row, index) {
											var s = '<button class="btn btn-info btn-sm edit"><span>编辑</span></button>';
											var d = '<button class="btn btn-danger btn-sm delete"><span>删除</span></button>';
											var fun = '';
											return s + ' ' + d;
										},
										events : {
											// 操作列中编辑按钮的动作
											'click .edit' : function(e, value,
													row, index) {
												//selectID = row.id;
												rowEditOperation(row);
											},
											'click .delete' : function(e,
													value, row, index) {
												select_mediaId = row.mediaId;
												$('#deleteWarning_modal').modal(
														'show');
											}
										}
									} ],
							url : 'mediaManage/getMediaList',
							onLoadError:function(status){
								handleAjaxError(status);
							},
							method : 'GET',
							queryParams : queryParams,
							sidePagination : "server",
							dataType : 'json',
							pagination : true,
							pageNumber : 1,
							pageSize : 5,
							pageList : [ 5, 10, 25, 50, 100 ],
							clickToSelect : true
						});
	}

	// 表格刷新
	function tableRefresh() {
		$('#mediaList').bootstrapTable('refresh', {
			query : {}
		});
	}

	// 行编辑操作
	function rowEditOperation(row) {
		$('#edit_modal').modal("show");

		// load info
		$('#media_form_edit').bootstrapValidator("resetForm", true);
		$('#storage_mediaID_edit').text(row.mediaId);
		$('#media_name_edit').val(row.mediaName);
		$('#media_category_edit').val(row.mediaCategory);
		$('#media_grade_edit').val(row.mediaGrade);
		$('#media_url_edit').val(row.mediaUrl);
	}

	// 编辑库存信息
	function editMediaAction() {
		$('#edit_modal_submit').click(
				function() {
					$('#media_form_edit').data('bootstrapValidator')
							.validate();
					if (!$('#media_form_edit').data('bootstrapValidator')
							.isValid()) {
						return;
					}

					var data = {
						mediaId : $('#storage_mediaID_edit').text(),
						mediaName : $('#media_name_edit').val(),
						mediaCategory : $('#media_category_edit').val(),
						mediaGrade : $('#media_grade_edit').val(),
						mediaUrl : $('#media_url_edit').val(),
					}
					// alert(data.mediaGrade)

					// ajax
					$.ajax({
						type : "POST",
						url : 'mediaManage/updateMediaRecord',
						dataType : "json",
						contentType : "application/json",
						data : JSON.stringify(data),
						success : function(response) {
							$('#edit_modal').modal("hide");
							var type;
							var msg;
							var append = '';
							if (response.result == "success") {
								type = "success";
								msg = "媒资信息更新成功";
							} else if (resposne == "error") {
								type = "error";
								msg = "媒资信息更新失败"
							}
							showMsg(type, msg, append);
							tableRefresh();
						},
						error : function(xhr, textStatus, errorThrown) {
							$('#edit_modal').modal("hide");
							// handle error
							handleAjaxError(xhr.status);
						}
					});
				});
	}

	// 刪除库存信息
	function deleteMediaAction(){
		$('#delete_confirm').click(function(){
			var data = {
				"mediaId" : select_mediaId,
			}
			
			// ajax
			$.ajax({
				type : "GET",
				url : "mediaManage/deleteMediaRecord",
				dataType : "json",
				contentType : "application/json",
				data : data,
				success : function(response){
					$('#deleteWarning_modal').modal("hide");
					var type;
					var msg;
					var append = '';
					if(response.result == "success"){
						type = "success";
						msg = "媒资信息删除成功";
					}else{
						type = "error";
						msg = "媒资信息删除失败";
					}
					showMsg(type, msg, append);
					tableRefresh();
				},error : function(xhr, textStatus, errorThrown){
					$('#deleteWarning_modal').modal("hide");
					// handle error
					handleAjaxError(xhr.status);
				}
			})
			
			$('#deleteWarning_modal').modal('hide');
		})
	}

	

</script>
<div class="panel panel-default">
	<ol class="breadcrumb">
		<li>媒资信息管理</li>
	</ol>
	<div class="panel-body">
		<div class="row">
			<div class="col-md-1  col-sm-2">
				<div class="btn-group">
					<button class="btn btn-default dropdown-toggle"
						data-toggle="dropdown">
						<span id="search_type">查询方式</span> <span class="caret"></span>
					</button>
					<ul class="dropdown-menu" role="menu">
						<li><a href="javascript:void(0)" class="dropOption">媒资ID</a></li>
						<li><a href="javascript:void(0)" class="dropOption">媒资名称</a></li>
						<li><a href="javascript:void(0)" class="dropOption">媒资类型</a></li>
						<li><a href="javascript:void(0)" class="dropOption">所有</a></li>
					</ul>
				</div>
			</div>
			<div class="col-md-9 col-sm-9">
				<div>
					<div class="col-md-3 col-sm-3">
						<input id="search_input_type" type="text" class="form-control"
							placeholder="媒资ID">
					</div>
					<div class="col-md-2 col-sm-2">
						<button id="search_button" class="btn btn-success">
							<span class="glyphicon glyphicon-search"></span> <span>查询</span>
						</button>
					</div>
				</div>
			</div>
		</div>


		<div class="row" style="margin-top: 15px">
			<div class="col-md-12">
				<table id="mediaList" class="table table-striped"></table>
			</div>
		</div>
	</div>
</div>



<!-- 删除提示模态框 -->
<div class="modal fade" id="deleteWarning_modal" table-index="-1"
	role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">警告</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-3 col-sm-3" style="text-align: center;">
						<img src="media/icons/warning-icon.png" alt=""
							style="width: 70px; height: 70px; margin-top: 20px;">
					</div>
					<div class="col-md-8 col-sm-8">
						<h3>是否确认删除该条库存信息</h3>
						<p>(注意：一旦删除该条库存信息，将不能恢复)</p>
					</div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal">
					<span>取消</span>
				</button>
				<button class="btn btn-danger" type="button" id="delete_confirm">
					<span>确认删除</span>
				</button>
			</div>
		</div>
	</div>
</div>

<!-- 编辑库存模态框 -->
<div id="edit_modal" class="modal fade" table-index="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true"
	data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button class="close" type="button" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">编辑媒资信息</h4>
			</div>
			<div class="modal-body">
				<!-- 模态框的内容 -->
				<div class="row">
					<div class="col-md-1 col-sm-1"></div>
					<div class="col-md-8 col-sm-8">
						<form class="form-horizontal" role="form" id="media_form_edit"
							style="margin-top: 25px">
							<div class="form-group">
								<label for="" class="control-label col-md-4 col-sm-4"> <span>媒资Id：</span>
								</label>
								<div class="col-md-4 col-sm-4">
									<p id="storage_mediaID_edit" class="form-control-static"></p>
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-md-4 col-sm-4"> <span>媒资名称：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="media_name_edit"
										name="media_name" placeholder="媒资名称">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-md-4 col-sm-4"> <span>媒资分类：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="media_category_edit"
										name="media_category" placeholder="媒资分类">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-md-4 col-sm-4"> <span>媒资等级：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="media_grade_edit"
										   name="media_grade" placeholder="媒资等级">
								</div>
							</div>
							<div class="form-group">
								<label for="" class="control-label col-md-4 col-sm-4"> <span>媒资存储地址：</span>
								</label>
								<div class="col-md-8 col-sm-8">
									<input type="text" class="form-control" id="media_url_edit"
										   name="media_url" placeholder="媒资存储地址">
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-1 col-sm-1"></div>
				</div>
			</div>
			<div class="modal-footer">
				<button class="btn btn-default" type="button" data-dismiss="modal">
					<span>取消</span>
				</button>
				<button class="btn btn-success" type="button" id="edit_modal_submit">
					<span>确认更改</span>
				</button>
			</div>
		</div>
	</div>
</div>